<template>
  <div class="search-input">
    <div class="search-input-content">
      <input type="text" class="input" v-model="searchText" placeholder="搜索名称、打包子路径">
      <div class="add-button" @click="add"><icon-font name="plus" font-size="20px" color="#fff"></icon-font></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchText: '',
      timer: null
    }
  },
  watch: {
    // 延迟搜索
    searchText (val) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.$emit('search', val)
      }, 200)
    }
  },
  methods: {
    add () {
      this.$emit('add')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-input{
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
  z-index: 9
}
.search-input-content{
  display: flex;
  align-items: center;
  height: 40px;
  width: 100%;
  max-width: 500px;
  .input{
    padding: 0 20px;
    height: 40px;
    width: 100%;
    background: #ebebeb;
    border-radius: 20px;
    border: none;
    outline: none;
    box-sizing: border-box;
  }
  .add-button{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 10px;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: $theme-color;
    cursor: pointer;
    &:active{
      background: $theme-active-color;
    }
  }
}
</style>